<template>
  <div class="container">
    <view class="list fz12 flex ">
      <view class="box">
        <view class="title fz12">家乡</view>
        <view class="content flex alignCenter">
          <text>不限</text>
          <uv-icon name="arrow-down" size="14"></uv-icon>
        </view>
      </view>
      <view class="box">
        <view class="title fz12">家乡</view>
        <view class="content flex alignCenter">
          <text>不限</text>
          <uv-icon name="arrow-down" size="14"></uv-icon>
        </view>
      </view>
    </view>

    <view class="list fz12 flex">
      <view class="box">
        <view class="title fz12">年龄</view>
        <view class="content flex alignCenter">
          <text>不限</text>
          <uv-icon name="arrow-down" size="14"></uv-icon>
        </view>
      </view>
      <view class="box">
        <view class="title fz12">身高（CM）</view>
        <view class="content flex alignCenter">
          <text>不限</text>
          <uv-icon name="arrow-down" size="14"></uv-icon>
        </view>
      </view>
    </view>

    <view class="cells">
      <view class="title">学历</view>
      <view class="flex flexWrap">
        <view class="cell fz12" v-for="(item,index) in edus" :key="index">{{item.configValue}}</view>
      </view>
    </view>

    <view class="cells">
      <view class="title">婚姻</view>
      <view class="flex flexWrap">
        <view class="cell fz12" v-for="(item,index) in marriages" :key="index">{{item.name}}</view>
      </view>
    </view>

    <view class="actionBtn">
      <view class="tips textCenter fz12">每日中午12点为你推荐</view>
      <view class="flex">
        <view class="init shrink">重置</view>
        <view class="open flex justifyCenter alignCenter">开启推荐</view>
      </view>
    </view>
  </div>
</template> 

<script setup lang="ts">
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();

let edus = ref([]);
let marriages = computed(() => {
  return [
    { name: "已婚", value: 1 },
    { name: "未婚", value: 2 },
  ];
});

onShow(() => {
  getDict();
});

let getDict = async () => {
  edus.value = await proxy.$apis.getOpenScreenMsg({
    configKey: "education_value",
  });
  console.log("学历", edus.value);
};
</script>



<style lang="scss" scoped>
.container {
  .cells {
    padding: 16px;
    margin-bottom: 22px;
    .title {
      color: #999999;
      margin-bottom: 8px;
    }
    .cell {
      background-color: #f3f3f3;
      padding: 4px 38px;
      border-radius: 18px;
      white-space: nowrap;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
  .list {
    padding: 16px;
    margin-bottom: 22px;
    .box {
      margin-right: 31px;
      .title {
        color: #999999;
        margin-bottom: 8px;
      }
      .content {
        background-color: #f3f3f3;
        padding: 4px 38px;
        border-radius: 18px;
        white-space: nowrap;
        text {
          margin-right: 3px;
        }
      }
    }
  }
  .actionBtn {
    position: fixed;
    padding: 15px;
    bottom: 25px;
    font-size: 14px;
    left: 0;
    right: 0;
    .tips {
      color: #999999;
      margin-bottom: 16px;
    }
    .init {
      background-color: #f3f3f3;
      border-radius: 8px;
      color: #333333;
      padding: 15px 35px;
    }
    .open {
      background-color: #9e06ff;
      border-radius: 8px;
      margin-left: 15px;
      color: white;
      width: 100%;
    }
  }
}
</style>



